<template>
  <div>
    <a-time-picker v-model="startTime" placeholder="开始时间" valueFormat="HH:mm:ss" />
    <span>-</span>
    <a-time-picker v-model="endTime" placeholder="结束时间" valueFormat="HH:mm:ss" />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'timeRangePicker',
  props: {
    value: {
      type: [Array, String]
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    moment,
    initData() {
      if (this.value) {
        const [start, end] = this.value
        this.startTime = start
        this.endTime = end
      }
    }
  },
  watch: {
    startTime: {
      handler: function() {
        this.$emit('input', [this.startTime, this.endTime])
      },
      immediate: true
    },
    endTime: {
      handler: function() {
        this.$emit('input', [this.startTime, this.endTime])
      },
      immediate: true
    }
  }
}
</script>
<style scoped></style>
